<template>
  <div class="express-center">
    <ul class="work-state">
      <li class="ws-item" @click="workStateTap(1)">
        <img class="wsi-img" :src="workState ? require('@/assets/mini_accident/working02.png') : require('@/assets/mini_accident/working01.png')" alt="">
        <p :class="workState ? 'selected' : 'normal'">开班</p>
      </li>
      <li class="ws-item" @click="workStateTap(0)">
        <img class="wsi-img" :src="workState ? require('@/assets/mini_accident/be_busy01.png') : require('@/assets/mini_accident/be_busy02.png')" alt="">
        <p :class="workState ? 'normal' : 'selected'">置忙</p>
      </li>
    </ul>
    <incoming-state v-if="comingState" />
    <working-state v-else />
  </div>
</template>

<script>
  import IncomingState from "@/components/MiniAccident/IncomingState";
  import WorkingState from "@/components/MiniAccident/WorkingState";
  import {setState} from "@/api/bureau/miniaccident/trtcroom.js";
  import { Message } from "element-ui";
  import {getStore} from '@/util/store'

  export default {
    name: "ExpressCenter",
    components: { IncomingState, WorkingState },
    data() {
      return {

      };
    },
    computed: {
      comingState() {
        return this.$store.state.MiniAccident.comingState;
      },
      workState() {
        return this.$store.state.MiniAccident.workState;
      }
    },
    mounted() {

    },
    methods: {
      workStateTap(_workState) {
        let that = this;
        let _userInfo = getStore({name: 'userInfo'});
        setState({
          status: _workState,
          userId: _userInfo.userId,
        }).then(function () {
          if (_workState == 1) {
            Message.success("当前状态: 开班");
          }
          if (_workState == 0) {
            Message.success("当前状态: 置忙");
            that.$store.dispatch("restState");
          }
          that.$store.commit("setWorkState", _workState);
        });
      }
    },
    destroyed() {
      let that = this;
      if(that.workState == 1){
        let _userInfo = getStore({name: 'userInfo'});
        setState({
          status: 0,
          userId: _userInfo.userId,
        }).then(function () {
          that.$store.dispatch("restState");
          that.$store.commit("setWorkState", 0);
          Message.success("当前状态: 置忙");
        });
      }
    }
  }
</script>

<style scoped lang="scss">
  .work-state{
    margin: 0px 0px 10px 0px;
    .ws-item:nth-of-type(1){
      cursor: pointer;
      user-select: none;
      display: inline-block;
    }
    .ws-item:nth-of-type(2){
      cursor: pointer;
      user-select: none;
      display: inline-block;
      margin: 0px 0px 0px 16px;
    }
    .wsi-img{
      width: 32px;
      height: 32px;
    }
    .normal{
      margin-top: 2px;
      color: #333333;
    }
    .selected{
      margin-top: 2px;
      color: #999999;
    }
  }
</style>
